.con{
    height: 220px;
    filter: brightness(1);
    transition: .5s;
    flex-shrink: 0;
}
.con:hover{
    transform: translateY(20px);
}
.con .info{
    position: absolute;
    z-index: 3;
    color: #fff;
    opacity: 0;
    transform: translateY(30px);
    transition: 0.5s all;
}
.con:hover .info{
    opacity: 1;
    transform: translateY(-110px);
}
.con:hover .img{
    opacity: 0.5;
}
.con:hover .content{
    visibility: hidden;
    opacity: o;
}
/**/
.con .infos{
    position: absolute;
    z-index: 3;
    color: #fff;
    opacity: 0;
    transform: translateY(30px);
    transition: 0.5s all;
}

.con:hover .infos{
    opacity: 1;
    transform: translateY(-150px);
}
.infos .btn{
    background-color: #070707;
    color: aliceblue;
}
.infos .btn:hover{
    background-color: aliceblue;
    color: #070707;
}
.infos{
    width: 100%;
}
/**/
.info{
    width: 100%;
}
.info .btn{
    background-color: #070707;
    color: aliceblue;
}
.info .btn:hover{
    background-color: aliceblue;
    color: #070707;
}
.con img{
    border-radius: 15px;
}
footer{
    background-image: url(Blue\ aesthetic\ background.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
}
.input-icons {
    width: 100%;
    margin-bottom: 10px;
}

.input-icons img {
    position: absolute;
}

.input-icons .icon {
    padding: 10px;
    text-align: center;
}

.input-field {
    width: 100%;
    padding: 10px;
    text-align: center;
}
a{
    text-decoration: none;
    color: var(--dark);
}
@media only screen and (max-width: 768px) {
    /* CSS to center the logo */
    .logo {
        display: block;
        margin-left: 77px; /* Center the logo horizontally */
    }
  }